<template>
  <!-- v-for="(item, index) in nearbyList" :key="index" -->
  <div class="shop">
    <img :src="item.headImg" class="shop__img" />
    <div
      :class="{
        shop__content: true,
        'shop__content--bordered': hideBorder ? false : true
      }"
    >
      <div class="shop__content__title">{{ item.title }}</div>
      <div class="shop__content__tags">
        <span class="shop__content__tag">月售：{{ item.sales }}</span>
        <span class="shop__content__tag">起送：￥{{ item.expressLimit }}</span>
        <span class="shop__content__tag">基础运费：￥{{ item.expressPrice }}</span>
      </div>
      <p class="shop__content__highlight">
        {{ item.highlight }}
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ShopInfo',
    // eslint-disable-next-line vue/require-prop-types
    props: ['item', 'hideBorder']
  }
</script>
<style lang="scss" scoped>
  @import '@/style/viriables';
  @import '@/style/mixins';
  .shop {
    display: flex;
    padding-top: 0.12rem;
    // 图片
    &__img {
      margin-right: 0.16rem;
      width: 0.56rem;
      height: 0.56rem;
    }
    //右侧文字内容
    &__content {
      padding-bottom: 0.12rem;
      &--bordered {
        border-bottom: 1px solid $content-bg-color;
      }
      flex: 1;
      &__title {
        line-height: 0.22rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__tags {
        margin-top: 0.08rem;
        line-height: 0.18rem;
        font-size: 0.13rem;
        color: $content-font-color;
      }
      &__tag {
        margin-right: 0.16rem;
      }
      &__highlight {
        color: #e93b3b;
        line-height: 0.18rem;
        font-size: 0.13rem;
        margin: 0.08rem 0 0 0;
      }
    }
  }
</style>
